Skip to content

feat: add loading skeleton, error states, and empty state to leaderboard UI#208

Merged
jagdish-15 merged 4 commits into
codepvg:mainfrom
rishab11250:feature/loading-error-states-issue179
Jun 18, 2026
Merged

feat: add loading skeleton, error states, and empty state to leaderboard UI#208
jagdish-15 merged 4 commits into
codepvg:mainfrom
rishab11250:feature/loading-error-states-issue179

Conversation

@rishab11250

@rishab11250 rishab11250 commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Description

Add visual feedback states to the leaderboard page: loading skeleton shimmer on initial load, error banner with retry when the GitHub raw data API is unreachable, and an empty state message when no data exists.

Linked Issue

Fixes #179

Changes Made

  • Loading skeleton — 8 shimmer rows (desktop grid) and 8 shimmer cards (mobile) embedded directly in #leaderboard-body and #mobile-cards. No separate show/hide toggles: renderLeaderboard() clears them naturally via innerHTML = "" when data arrives.
  • Error state — Banner with [!] icon, LEADERBOARD_DATA_UNAVAILABLE message, description, and [RETRY] button. Shown when all 4 data endpoints (overall.json, monthly.json, weekly.json, daily.json) fail. Retry clears cached data and re-fetches from scratch.
  • Empty state — When API returns an empty array, shows [SYS]: NO_LEADERBOARD_DATA_YET in both desktop and mobile containers.
  • CSS — Added @keyframes skeleton-shimmer animation, skeleton row/card styles, error/empty state styles, and responsive overrides. Data rows use fadeIn animation for smooth skeleton-to-data transition.

Files modified:

  • frontend/leaderboard.html — Skeleton HTML markup, error banner HTML, inline JS for error/empty state handling
  • frontend/styles/main.css — All skeleton, error, and empty state styles + animations

Type of Change

  • Bug fix
  • New feature
  • UI/Visual update
  • Documentation update
  • Refactor

Testing

  • Tested locally
  • Tested on mobile viewport (if applicable)
  • No console errors introduced

How to test:

  1. Open frontend/leaderboard.html — skeleton shimmer appears initially
  2. Data loads from GitHub raw API — skeleton fades into real data
  3. Block raw.githubusercontent.com in devtools Network panel and reload — error banner with [RETRY] appears
  4. Point fetch to an empty JSON file — NO_LEADERBOARD_DATA_YET message shown
  5. Resize to mobile — skeleton cards shown instead of rows

Checklist

  • My code follows the project's coding style
  • I have formatted my code locally by running npx prettier --write . before submitting
  • I am submitting my PR from a dedicated feature/* branch, not the main branch
  • I have performed a self-review of my code
  • My changes generate no new warnings or errors
  • I have updated documentation if required
  • I have linked the relevant issue

Screenshots / Screen Recording

@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

Formatting and Branching

  • Please confirm you have formatted your code locally using npx prettier --write ., or you can simply comment /format on this PR to have our bot do it for you!
  • Ensure this PR is made from a feature/* branch and not main.

Note: This project is currently maintained by a solo maintainer, so reviews and responses may sometimes take a little time. Thanks for your patience.

@rishab11250
feat: add loading skeleton, error states, and empty state to leaderbo…
3b21914 
…ard UI

Implement Issue codepvg#179: Loading Skeleton + Error States for Leaderboard.

- Add 8 skeleton shimmer rows (desktop) and 8 skeleton cards (mobile)
  that display on page load, naturally cleared by renderLeaderboard()
- Add error banner with [RETRY] button when all 4 data endpoints fail
  - Error re-fetches data on click, clears cached entries
- Add empty state message when API returns no data
- Add CSS shimmer animation, fade-in transition for data rows
- All states responsive — skeleton rows hidden on mobile,
  skeleton cards hidden on desktop

Resolves codepvg#179
@rishab11250 rishab11250 force-pushed the feature/loading-error-states-issue179 branch from 8aba773 to 3b21914 Compare June 18, 2026 05:46
jagdish-15
jagdish-15 requested changes Jun 18, 2026
View reviewed changes
Comment thread frontend/styles/main.css Outdated
@rishab11250
fix: replace corrupted non-ASCII chars with ASCII equivalents in CSS …
0e5793c 
…comments

All 33 section header comments in main.css had Unicode box-drawing
characters (U+2500, U+2014, U+2192, U+2794) that got corrupted during
an earlier encoding conversion, rendering as '??????' in GitHub's diff.

- ─ (U+2500) → --
- — (U+2014) → ---
- → (U+2192) → ->
- ➔ (U+2794) → >

Rebuilt the file from the clean upstream base to avoid any lingering
encoding corruption. All CSS content values using arrows were converted
to their ASCII equivalents.

Fixes review feedback on PR codepvg#208.
@rishab11250 rishab11250 requested a review from jagdish-15 June 18, 2026 08:22
jagdish-15
jagdish-15 requested changes Jun 18, 2026
View reviewed changes
Comment thread frontend/leaderboard.html Outdated
@jagdish-15 jagdish-15 added type:feature New feature or request level:intermediate Indicates the difficulty gssoc:approved labels Jun 18, 2026
@jagdish-15 jagdish-15 merged commit bb54ea3 into codepvg:main Jun 18, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jagdish-15 jagdish-15 jagdish-15 approved these changes

Assignees

No one assigned

Labels

gssoc:approved level:intermediate Indicates the difficulty type:feature New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Frontend] Add Loading Skeleton & Error States to Leaderboard UI

2 participants

@rishab11250 @jagdish-15